<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Moiré Patterns</title>
    <script type="text/javascript" src="../../d3.v2.js"></script>
    <style type="text/css">

circle {
  fill: none;
  stroke: #000;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var width = 960,
    height = 500;

var svg = d3.select("body")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("pointer-events", "all");

svg.append("g")
  .selectAll("circle")
    .data(d3.range(110))
  .enter().append("circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .attr("r", function(d) { return d * 5; });

var circle = svg.append("g")
  .selectAll("circle")
    .data(d3.range(60))
  .enter().append("circle")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .attr("r", function(d) { return d * 3; });

svg.on("mousemove", function() {
  var mouse = d3.mouse(this),
      r = (Math.sqrt(mouse[0]) + 10) / 10;

  circle
      .attr("transform", "translate(" + mouse + ")")
      .attr("r", function(d) { return d * r; });
});

    </script>
  </body>
</html>
